<template>
    <div class="container">
        <video 
        :src="src"
        autoplay
        loop
        muted
        playsInline
        id="myvideo"
        class="myvideo"
        >
        </video>
        <div class="myform">
            <div class="title">
                <h2>用户注册</h2>
            </div>
            <div class="body-ele">
                <el-form
                    label-position="left"
                    label-width="100px"
                    :model="form"
                    style="max-width: 460px"
                    ref="myform"
                    :rules="rules"
                >
                    <el-form-item 
                        label="用户名"
                        prop="username"
                        >
                        <el-input v-model="form.username" clearable :prefix-icon="User"/>
                    </el-form-item>
                    <el-form-item 
                        label="手机号"
                        prop="phone"
                        >
                        <el-input v-model="form.phone" clearable :prefix-icon="Iphone"/>
                    </el-form-item>
                    <el-form-item 
                        label="密码"
                        prop="password"
                        >
                        <el-input type="password" @blur="noFocus" clearable show-password v-model="form.password" :prefix-icon="Lock"/>
                    </el-form-item> 
                    <el-form-item 
                        label="确认密码"
                        prop="dbpassword"
                        >
                        <el-input type="password" clearable show-password v-model="form.dbpassword" :prefix-icon="Lock"/>
                    </el-form-item> 
                    <div class="lastitem">
                        <div class="alinks">
                            <router-link :to="{name:'login'}">有账号，去登录</router-link>
                            <router-link :to="{name:'forget'}">忘记密码？</router-link>
                        </div>
                    </div>
                    <div class="lastitem">
                        <div class="alinks">
                            <el-button block type="success" class="btnblock" @click="submitForm(form)">注册</el-button>
                            <el-button block type="warning" class="btnblock" @click="resetForm">重置</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import {reactive ,toRefs,onMounted,ref} from 'vue' ; 
import {reg} from '@/utils/reg' ; 
import {ElMessage} from 'element-plus' ;
import {ajax} from '@/api/index' ; 
import {useRouter} from 'vue-router' ; 
import {UserFilled,Lock,User,Iphone} from '@element-plus/icons-vue' ; 
export default {
    setup(props){
        const state = reactive({
            form:{
            },
            UserFilled,
            Lock,
            User,
            Iphone,
            src:'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4',
            rules:{
                username:[
                    {required:true,message:'请填写用户名'},
                ],
                phone:[
                    {required:true,message:'请填写手机号'},
                    {pattern:reg.phone,message:'请输入正确的手机号'}
                ],
                password:[
                    {required:true,message:'请填写密码'},
                    {pattern:reg.pwd,message:'请输入6-16数字加字母'}
                ],
                dbpassword:[
                    {required:true,message:'请填写密码'},
                    {pattern:reg.pwd,message:'请输入6-16数字加字母'},
                    {validator:checkPass,message:'两次密码不一致'}
                ],
            }
        });
        const checkPass = (rule,value,callback)=>{
            if(state.form.password != value ){
                callback(new Error('两次密码不一样!!!'))
            } else {
                callback();
            }
        };

        const noFocus = ()=>{
            if( reg.pwd.test(state.form.dbpassword)){
                if( state.form.password != state.form.dbpassword ){
                    ElMessage.error('两次密码不一致') ;
                }
            }
        }

        const myform = ref();
        const router = useRouter();
        const submitForm = ()=>{
            myform.value.validate( async (valid)=>{
                if(valid){
                    let res = await ajax.register({...state.form,role:1}) ; 
                    if( res.code == 200 ) {
                        router.push({name:'login',query:{username:state.form.username,phone:state.form.phone}})
                    }
                } else {
                    ElMessage.error('请输入正确的注册信息！');
                }
            });
        };
        const resetForm = ()=>{
            // state.form = {} ; 
            myform.value.resetFields();
        };
        return {
            ...toRefs(state),
            submitForm,
            resetForm,
            noFocus,
            myform
        }
    }
}
</script>
<style lang="scss" scoped>
.container{
    height: 100%;
    width: 100%;
    // border: 1px solid red;
    .myvideo{
        position: fixed;
        min-width: 100%;
        min-height: 100%;
        z-index: 0;
        top:0;
        left: 0;
    }
    .myform{
        position: absolute;
        width: 500px;
        height: 380px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 1px rgb(88, 70, 70),
        -1px -1px 1px rgb(112, 66, 66),
        -1px 1px 1px rgb(112, 66, 66),
        1px -1px 1px rgb(112, 66, 66),
        ;
        border-radius: 5px;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto auto ;
        .title{
            height: 30px;
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            color: #fff;
            margin: 10px 0px;
        }
        .body-ele{
            box-sizing: border-box;
            padding: 0 40px;
            ::v-deep .el-form-item__label{
                color: rgba(255,255,255,0.7);
            }
            ::v-deep .el-input__inner{
                outline:1px;
                background-color: transparent;
            }
            .lastitem .alinks{
                margin-top: 25px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                a{
                    font-size: 14px;
                    color: rgb(36, 182, 170);
                }
                .el-button{
                    width: 48%;
                    height: 35px;
                }
            }
        }
    }
}
</style>

